<template>
	<div class="layout-padding">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="部门" name="deptSort"></el-tab-pane>
			<el-tab-pane label="区域" name="areaSort"></el-tab-pane>
			<el-tab-pane label="分项" name="subitemSort"></el-tab-pane>
			<el-tab-pane label="支路" name="branchSort"></el-tab-pane>
			<el-tab-pane label="设备" name="devSort"></el-tab-pane>
		</el-tabs>
		<div class="content">
			<div class="level">
				<div class="level-l">
					<div class="head">统计对象</div>
					<div class="dept">
						<el-scrollbar class="data-scrollbar">
							<el-input placeholder="输入关键字进行过滤" v-model="deptName" style="margin-bottom: 10px"> </el-input>
							<el-tree
								checkStrictly
								default-expand-all
								ref="deptTree"
								node-key="id"
								placeholder="请选择 上级部门"
								:data="treeData"
								:props="treeDataProps"
								:current-node-key="currentNodeKey"
								:filter-node-method="filterNode"
								:highlight-current="true"
								:expand-on-click-node="false"
								@node-click="getNodeData"
							></el-tree>
						</el-scrollbar>
					</div>
				</div>
				<div class="level-r">
					<el-form :inline="true" :model="queryForm">
						<el-form-item label="统计周期: ">
							<el-select placeholder="请选择" v-model="queryForm.dataType" style="width: 100px; margin-right: 20px" @change="changeFormat">
								<el-option label="时" value="datetimerange"></el-option>
								<el-option label="日" value="daterange"></el-option>
								<el-option label="月" value="monthrange"></el-option>
								<el-option label="年" value="yearrange"></el-option>
							</el-select>
							<el-date-picker
								style="width: 350px"
								:type="queryForm.dataType"
								v-model="queryForm.date"
								:disabled-date="pickerOptions1"
								:format="formatDate"
								:value-format="formatDate"
								placeholder="请选择"
							/>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
							<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
						</el-form-item>
					</el-form>
					<div style="height: 150px; width: 100%; display: flex; justify-content: center">
						<div
							style="border: 1px solid #ccc; width: 20%; height: 150px; display: flex; flex-direction: column; justify-content: center"
							v-for="item in data"
							:key="item"
						>
							<el-row>
								<el-col :span="12" style="text-align: center; margin-top: 10px; font-size: 18px; font-weight: bold">{{ item.name }}</el-col>
								<el-col :span="12" style="text-align: center; margin-top: 10px">评价电价（{{ item.price }}元）</el-col>
							</el-row>
							<el-row>
								<el-col :span="12" style="text-align: center; margin-top: 10px">电费（元）</el-col>
								<el-col :span="12" style="text-align: center; margin-top: 10px">用电量（kwh）</el-col>
							</el-row>
							<el-row>
								<el-col :span="12" style="text-align: center; margin-top: 10px; font-size: 18px; font-weight: bold">{{ item.sumPrice }}</el-col>
								<el-col :span="12" style="text-align: center; margin-top: 10px; font-size: 18px; font-weight: bold">{{ item.totalValue }}</el-col>
							</el-row>
						</div>
					</div>
					<el-radio-group v-model="type" style="margin: 20px 0">
						<el-radio-button label="图形" value="1" />
						<el-radio-button label="图表" value="2" />
					</el-radio-group>
					<div style="display: flex; justify-content: space-between" v-show="type == '1'">
						<div id="chart" style="width: 30%; height: 400px; border: 1px solid #ccc"></div>
						<div id="chart2" style="width: 68%; height: 400px; border: 1px solid #ccc"></div>
					</div>
					<div style="display: flex" v-show="type == '2'">
						<avue-crud ref="crud" :data="data" :table-loading="loading" :option="tableOption"></avue-crud>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="">
import { ref, reactive, onMounted } from 'vue';
import { deptConfigData, getCostData, getCostDataChart } from '/@/api/consumptionmanagement/energyanalysis/cost';
import echarts from '/@/utils/chart';
import { dataType } from 'element-plus/es/components/table-v2/src/common';
import moment from 'moment';
import { useMessage, useMessageBox } from '/@/hooks/message';

const dim = ref('2');
const type = ref('1');
const data = ref([
	{
		name: '尖时段',
		sumPrice: 0,
		totalValue: 0,
		price: 0,
	},
	{
		name: '峰时段',
		sumPrice: 0,
		totalValue: 0,
		price: 0,
	},
	{
		name: '平时段',
		sumPrice: 0,
		totalValue: 0,
		price: 0,
	},
	{
		name: '谷时段',
		sumPrice: 0,
		totalValue: 0,
		price: 0,
	},
	{
		name: '总费用',
		sumPrice: 0,
		totalValue: 0,
		price: 0,
	},
]);
const tableOption = reactive({
	border: true,
	excelBtn: true,
	gridBtn: false,
	index: false,
	stripe: true,
	labelWidth: '160',
	indexWidth: '60',
	menuAlign: 'center',
	align: 'center',
	addBtn: false,
	menu: false,
	maxHeight: 600,
	fit: true,
	refreshBtn: false,
	columnBtn: false,
	searchMenuSpan: 6,
	searchLabelWidth: 'auto',
	searchMenuPosition: 'left',
	column: [
		{
			label: '电价类型',
			prop: 'name',
		},
		{
			label: '电价',
			prop: 'price',
		},
		{
			label: '用电量（kwh）',
			prop: 'totalValue',
		},
		{
			label: '电费（元）',
			prop: 'sumPrice',
		},
	],
});
const activeName = ref('areaSort');
const loading = ref(false);
const currentNodeKey = ref('');
const queryForm = reactive({
	dataType: 'datetimerange',
	date: [moment().startOf('day').hour(1).format('YYYY-MM-DD HH'), moment().format('YYYY-MM-DD HH')],
});

const pickerOptions1 = (time) => {
	return time.getTime() > Date.now();
};
const formatDate = ref('YYYY-MM-DD HH');
const deptName = ref('');
const deptTree = ref();
const treeData = ref([]);
const treeDataProps = ref({
	label: 'name',
	value: 'id',
});
const initChart = (data) => {
	const chart = echarts.init(document.getElementById('chart'));
	const option = {
		tooltip: {
			trigger: 'item',
		},
		title: {
			text: '电费分析',
			left: 'left',
		},
		legend: {
			top: '10%',
			left: 'center',
		},
		series: [
			{
				name: '电费分析',
				type: 'pie',
				radius: ['40%', '70%'],
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center',
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 40,
						fontWeight: 'bold',
					},
				},
				labelLine: {
					show: false,
				},
				data: data,
			},
		],
	};
	chart.setOption(option);
};
const initChart2 = (seriesData, xData) => {
	const chart = echarts.init(document.getElementById('chart2'));
	const option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		title: {
			text: '电费用量',
			left: 'left',
		},
		legend: {},
		grid: {
			top: '10%',
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				data: xData,
			},
		],
		yAxis: [
			{
				name: '',
			},
		],
		series: seriesData,
	};
	chart.setOption(option);
};
const changeFormat = (val) => {
	formatDate.value = val == 'daterange' ? 'YYYY-MM-DD' : val == 'monthrange' ? 'YYYY-MM' : val == 'datetimerange' ? 'YYYY-MM-DD HH' : 'YYYY';
};
const getTreeData = (type) => {
	let str;
	if (activeName.value == 'deptSort') {
		str = 'dimdept';
	} else if (activeName.value == 'areaSort') {
		str = 'dimarea';
	} else if (activeName.value == 'subitemSort') {
		str = 'dimSubitem';
	} else if (activeName.value == 'branchSort') {
		str = 'dimBranch';
	} else if (activeName.value == 'devSort') {
		str = 'dimKeq';
	}
	deptConfigData(type, str).then((res) => {
		treeData.value = res.data?.map((item) => {
			return {
				...item,
				disabled: true,
			};
		});
		if (treeData.value.length > 0) {
			currentNodeKey.value = treeData.value[0].id;
			nextTick(() => {
				deptTree.value.setCurrentKey(currentNodeKey.value);
				deptTree.value.setCheckedKeys([currentNodeKey.value]);
			});
		}
	});
};

const handleClick = (tab, event) => {
	activeName.value = tab.props.name;
	if (activeName.value == 'deptSort') {
		dim.value = '1';
		getTreeData(1);
	} else if (activeName.value == 'areaSort') {
		dim.value = '2';
		getTreeData(1);
	} else if (activeName.value == 'subitemSort') {
		dim.value = '3';
		getTreeData();
	} else if (activeName.value == 'branchSort') {
		dim.value = '4';
		getTreeData();
	} else if (activeName.value == 'devSort') {
		dim.value = '5';
		getTreeData(1);
	}
};
const getNodeData = (data: any) => {
	currentNodeKey.value = data.id;
	deptTree.value.setCurrentKey(data.id); // 选中树节点
};
const search = () => {
	let dateArr = queryForm.date;
	getCostData({
		dimType: dim.value,
		id: currentNodeKey.value,
		startDate: dateArr[0],
		endDate: dateArr[1],
	}).then((res) => {
		if (res?.data.length > 0) {
			data.value = res.data.map((item) => {
				if (item.rateType == 0) {
					item.name = '总电费';
				} else if (item.rateType == 1) {
					item.name = '尖时段';
				} else if (item.rateType == 2) {
					item.name = '峰时段';
				} else if (item.rateType == 3) {
					item.name = '平时段';
				} else if (item.rateType == 4) {
					item.name = '谷时段';
				}
				return item;
			});
		}
	});
	getCostDataChart({
		dimType: dim.value,
		id: currentNodeKey.value,
		startDate: dateArr[0],
		endDate: dateArr[1],
	}).then((res) => {
		if (res) {
			initChart(res.data.data);
			let seriesData = res.data?.stacked.series?.map((item) => {
				return {
					name: item.name,
					type: 'bar',
					data: item.data,
					stack: 'a',
					barWidth: '30%',
				};
			});
			initChart2(seriesData, res.data?.stacked.xAxisData);
		}
	});
};
onMounted(() => {
	getTreeData(1);
	search();
});
watch(deptName, (val) => {
	deptTree.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
	if (!value) return true;
	return data.name.includes(value);
};
</script>
<style scoped lang="scss">
::v-deep .demo-tabs {
	background: #fff;
	padding: 10px;
	.el-tabs__header {
		margin-bottom: 0;
		display: inline-block;
	}
	.el-tabs__nav-wrap:after {
		background-color: initial;
	}
	.el-tabs__item {
		margin: 0 10px;
	}
}
.data-scrollbar {
	.area-item {
		margin: 10px 30px;
		.active {
			background: var(--el-color-primary);
			color: #fff;
		}
		span {
			display: inline-block;
			width: 320px;
			height: 36px;
			line-height: 36px;
			border-radius: 4px;
			font-size: 15px;
			text-align: center;
			transition: all 0.5s;
			cursor: pointer;
			border: 1px solid #efefef;
			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}
	}
}
.dept,
.dept2,
.area {
	padding: 0 10px;
	border-top: 1px solid #eee;
	padding-top: 10px;
}
.content {
	margin-top: 10px;
	height: calc(100% - 73px);
}
.dept {
	height: calc(100% - 67px);
}
.dept2 {
	height: calc(100% - 67px - 87px - 67px);
}
.level {
	display: flex;
	height: 100%;
	margin-top: 10px;
	.level-l {
		width: 20%;
		background: #fff;
		margin-right: 6px;
	}
	.level-r {
		width: 80%;
		padding: 20px;
		background: #fff;
		margin-left: 6px;
	}
	.shui-dian {
		border-top: 1px solid #eee;
		padding: 20px;
		// text-align: center;
		.active {
			background: var(--el-color-primary);
			color: #fff;
		}
		span {
			display: inline-block;
			width: 80px;
			height: 36px;
			line-height: 36px;
			border-radius: 4px;
			color: #333;
			margin-right: 10px;
			margin-top: 10px;
			text-align: center;
			transition: all 0.5s;
			cursor: pointer;
			border: 1px solid #efefef;
			&:hover {
				background: var(--el-color-primary);
				color: #fff;
			}
		}
	}
	.condition {
		height: 64px;
		border: 1px solid #efefef;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 10px;
	}
	.data-area {
		display: flex;
		margin-top: 10px;
		justify-content: space-between;
		.item {
			width: calc((100% - 20px) / 3);
			height: 200px;
			background: #fff;
		}
		.head-num {
			border-top: 1px solid #efefef;
			padding-top: 40px;
			text-align: center;
			font-size: 36px;
			font-weight: bold;
			font {
				font-size: 18px;
				margin-left: 10px;
			}
		}
	}
	.level-content {
		position: relative;
		background: #fff;
		margin-top: 10px;
		padding: 0 10px;
		width: calc(100% - 20px);
		.data-table {
			margin-top: 30px;
		}
		.unit {
			position: absolute;
			left: 20px;
			top: 10px;
			font-size: 14px;
			font-weight: 700;
		}
	}
}
.head {
	padding: 20px 10px;
	position: relative;
	font-size: 18px;
	padding-left: 25px;
	&:before {
		content: '';
		width: 2px;
		position: absolute;
		height: 24px;
		left: 10px;
		background: var(--el-color-primary);
	}
}
</style>
